<template>
	<view>
		<view class="content f-dc">
			<u-navbar title="审批人设置" :fixed="false" leftIconColor="#fff" :autoBack="true">
			</u-navbar>

			<view class="content_main">
				<view class="drawer_content">
					<view class="approver_content">
						<u-radio-group style="padding: 10px;" v-model="approverConfig.settype" class="clear"
							placement="row" @change="changeType">
							<u-radio :name="4" label="指定成员"></u-radio>
							<u-radio :name="7" label="连续多级主管"></u-radio>
						</u-radio-group>

						<!-- <button type="primary" @click="addApprover" v-if="approverConfig.settype==1">添加/修改成员</button>

						<p class="selected_list" v-if="approverConfig.settype==1">
							<text v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}}
								<image src="/static/assets/image/nodeWarp/add-close1.png"
									@click="removeEle(approverConfig.nodeUserList,item,'targetId')">
							</text>
							<a v-if="approverConfig.nodeUserList.length!=0"
								@click="approverConfig.nodeUserList=[]">清除</a>
						</p> -->
					</view>
					<view class="approver_manager" v-if="approverConfig.settype==2">
						<p>
							<text>发起人的：</text>

							<uni-data-select v-model="approverConfig.examineEndDirectorLevel"
								:localdata="selectData(directorMaxLevel,'直接')" :clear="false" placeholder="请选择账套">
								<template #text={element}>
									<text>{{element.text}}</text>
								</template>
							</uni-data-select>
						</p>
						<p class="tip">找不到主管时，由上级主管代审批</p>
					</view>
					<view class="approver_self" v-if="approverConfig.settype==5">
						<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
					</view>
					<view class="approver_self_select" v-show="approverConfig.settype==4">
						<u-radio-group v-model="approverConfig.selectMode" style="width: 100%;padding: 10px;">
							<u-radio :name="2" label="选成员/角色"></u-radio>
						</u-radio-group>
						<h3>选择范围</h3>

						<view style="padding: 10px 15px;">
							<uni-section title="选择范围" type="line">
								<u-radio-group v-model="approverConfig.selectRange" style="width: 100%;padding: 10px;"
									@change="changeRange">
									<u-radio :name="1" label="全公司"></u-radio>
									<u-radio :name="2" label="指定成员"></u-radio>
									<u-radio :name="3" label="指定角色"></u-radio>
								</u-radio-group>


								<view style="padding: 10px 15px;">
									<button type="primary" @click="addApprover" size="mini"
										v-if="approverConfig.selectRange==2">添加/修改成员</button>
									<button type="primary" @click="addRoleApprover" size="mini"
										v-if="approverConfig.selectRange==3">添加/修改角色</button>
								</view>


								<view class="selected_list x-f"
									v-if="approverConfig.selectRange==2||approverConfig.selectRange==3">
									<!-- <view v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{item.name}}
										<image src="/static/assets/image/nodeWarp/add-close1.png"
											style="width: 14px; height: 14px;"
											@click="removeEle(approverConfig.nodeUserList,item,'targetId')">
									</view> -->

									<view style="padding: 10px 15px;width: 100%;"
										v-if="approverConfig.nodeUserList && approverConfig.nodeUserList.length">
										<view
											style="width: 100%;max-height: 300px;overflow: auto;min-height: 60px;border: 2px solid #cecece;display: flex;flex-wrap: wrap;padding: 10px;">
											<up-tag v-for="(item,index) in approverConfig.nodeUserList" :key="index"
												style="width: fit-content;margin: 4px 4px;min-width: 208rpx;max-width: 40%;">
												<template #content>
													<view class="x-bc" style="width: 100%;">
														<view style="height: 100%;font-size: 12px;color: #fff;flex: 1;">
															<text>{{item.name}}</text>
														</view>

														<view class="x-c"
															@click="removeEle(approverConfig.nodeUserList,item,'targetId')"
															style="height: 100%;border-left: 1px solid #f7f7f7;width: fit-content;padding-left: 4px;">
															<up-icon name="close" color="#fff" size="14"></up-icon>
														</view>

													</view>
												</template>
											</up-tag>


											<up-tag
												v-if="approverConfig.nodeUserList.length!=0&&approverConfig.selectRange!=1"
												style="width: fit-content;margin: 4px 6px;" text="清除" size="mini"
												type="error" @click="clearTags"></up-tag>

										</view>
									</view>
								</view>
							</uni-section>
						</view>


					</view>

					<view class="approver_manager" style="padding: 10px 15px;" v-if="approverConfig.settype==7">
						<p style="font-weight: 600;">审批终点</p>

						<uni-section title="发起人的" type="line" style="margin-top: 10px;">
							<uni-data-select v-model="approverConfig.examineEndDirectorLevel"
								:localdata="selectData(directorMaxLevel,'最高')" :clear="false" placeholder="请选择账套">
								<template #text={element}>
									<text>{{element.text}}</text>
								</template>
							</uni-data-select>
						</uni-section>
					</view>
					<view class="approver_some" style="padding: 10px 15px;"
						v-if="(approverConfig.settype==1&&approverConfig.nodeUserList.length>1)||approverConfig.settype==2||(approverConfig.settype==4&&approverConfig.selectMode==2)">

						<uni-section title="多人审批时采用的审批方式" type="line">
							<u-radio-group v-model="approverConfig.examineMode" placement="column"
								style="width: 100%;padding: 10px;" class="clear">
								<u-radio :name="1" label="或签"></u-radio>
								<u-radio v-if="approverConfig.settype!=2" :name="2" label="会签(须所有审批人同意)"></u-radio>
							</u-radio-group>
						</uni-section>
					</view>

					<view class="approver_some" style="padding: 10px 15px;"
						v-if="approverConfig.settype==2||approverConfig.settype==7">

						<uni-section title="审批人为空时" type="line" style="margin-top: 10px;">
							<u-radio-group v-model="approverConfig.noHanderAction" placement="column"
								style="width: 100%;padding: 10px;" class="clear">
								<u-radio :name="1" label="自动审批通过/不允许发起"></u-radio>
								<u-radio :name="2" label="转交给审核管理员"></u-radio>
							</u-radio-group>
						</uni-section>
					</view>
				</view>
			</view>


			<view class="content_bottom x-ec" :style="uni.$utils.disposeSafeBottomFun()">
				<button @click="closeConfig" class="content_bottom_primary_plainBtn CommonBtnSize">取消</button>
				<button @click="submitConfig" class="content_bottom_primary_Btn CommonBtnSize">确定</button>
			</view>
		</view>


		<!-- 指定成员 -->
		<mTransfer v-model:show.sync="showTransfer" :option="option" @close="closeTransfer" @submit="submitTransfer">
		</mTransfer>

		<mUserRolePage v-model:show.sync="approverRoleVisible" :option="optionRole" @close="closeRolePage"
			@submit="submitTransfer"></mUserRolePage>
	</view>
</template>

<script>
	import mTransfer from '@/uni_modules/mc-ui/components/m-node-warp/components/m-transfer/m-transfer.vue';
	import mUserRolePage from '@/uni_modules/mc-ui/components/m-node-warp/components/m-user-role-page/m-user-role-page.vue';

	import {
		useMainStore,
		useInventoryStore
	} from '@/store';
	export default {
		components: {
			mTransfer,
			mUserRolePage
		},
		data() {
			return {
				typeName: '',
				approverRoleVisible: false, // 指定角色
				optionRole: {
					typeName: '',
					title: '',
					childDepartments: [],
					employees: [],
				},

				showTransfer: false, // 指定成员
				option: {
					typeName: '',
					title: '',
					childDepartments: [],
					employees: [],
				},
				approverConfig: {
					settype: 4, // 第一级选项
					nodeUserList: [],
					examineEndDirectorLevel: 1,
					selectMode: 2, // 选成员/角色
					selectRange: 1, // 选择范围
					examineMode: 1, // 多人审批时采用的审批方式
				},
				directorMaxLevel: 10,
				approverEmplyessList: [],
				onListenning: null
			};
		},
		computed: {
			inventoryStore() {
				return useInventoryStore();
			},
			mainStore() {
				return useMainStore();
			},
		},
		onLoad(option) {
			console.log(this.mainStore.BaseScreenParm);
			if (!uni.$utils.isEmpty(option)) {
				this.typeName = option.typeName;
				this.option.typeName = option.typeName;
				this.optionRole.typeName = option.typeName;
				this.approverConfig = JSON.parse(JSON.stringify(this.mainStore.BaseScreenParm))
				this.onListenning = 'gitCellCardInfo' + this.inventoryStore.st_comPageConfig.nodewarpIndex

			} else {
				uni.$utils.msg('数据异常，请重试！')
			}

		},
		methods: {
			closeConfig() { // config取消
				uni.navigateBack();
			},
			submitConfig() { // config确认
				console.log(this.setApproverStr(this.approverConfig));
				this.approverConfig.error = !this.setApproverStr(this.approverConfig)

				// this.$emit("update:nodeConfig", this.approverConfig);

				let option = {
					typeName: this.typeName
				};

				let settype = this.approverConfig.settype; // 指定成员/连续多级主管

				if (settype == 4) { // 指定成员
					let selectRange = this.approverConfig.selectRange; // 选择范围

					if (selectRange == 1) { // 全公司

					} else if (selectRange == 2) { // 指定成员
						option = uni.$utils.deepClone(this.option);
					} else if (selectRange == 3) { // 指定角色
						option = uni.$utils.deepClone(this.optionRole);
					}

				} else if (settype == 7) { // 连续多级主管

				}
				// console.log(option);
				// console.log(this.approverConfig);

				uni.$emit(this.onListenning, {
					data: {
						option: option,
						approverConfig: this.approverConfig
					}
				});
				uni.navigateBack();
			},
			setApproverStr(nodeConfig) {
				if (nodeConfig.settype == 1) {
					if (nodeConfig.nodeUserList.length == 1) {
						return nodeConfig.nodeUserList[0].name
					} else if (nodeConfig.nodeUserList.length > 1) {
						if (nodeConfig.examineMode == 1) {
							return this.arrToStr(nodeConfig.nodeUserList)
						} else if (nodeConfig.examineMode == 2) {
							return nodeConfig.nodeUserList.length + "人会签"
						}
					}
				} else if (nodeConfig.settype == 2) {
					let level = nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
					if (nodeConfig.examineMode == 1) {
						return level
					} else if (nodeConfig.examineMode == 2) {
						return level + "会签"
					}
				} else if (nodeConfig.settype == 4) {
					if (nodeConfig.selectRange == 1) {
						return "发起人自选"
					} else {
						if (nodeConfig.nodeUserList.length > 0) {
							if (nodeConfig.selectRange == 2) {
								return "发起人自选"
							} else {
								return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
							}
						} else {
							return "";
						}
					}
				} else if (nodeConfig.settype == 5) {
					return "发起人自己"
				} else if (nodeConfig.settype == 7) {
					return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
				}
			},

			closeRolePage() { // 关闭角色弹层
				this.approverRoleVisible = false;
			},
			closeTransfer() { // 关闭成员弹层
				this.showTransfer = false;
			},
			submitTransfer(data) { // 确认成员/角色弹层
				let that = this;
				// 指定成员 - 指定成员
				if (this.approverConfig.settype == 1 || (this.approverConfig.settype == 4 && this.approverConfig
						.selectRange == 2)) {

					let {
						checkedEmployessList
					} = data;
					this.approverConfig.nodeUserList = [];

					checkedEmployessList.map(item => {
						that.approverConfig.nodeUserList.push({
							type: 1,
							targetId: item.id,
							name: item.employeeName
						})
					});
					console.log(this.approverConfig.nodeUserList);

					this.option.employees = JSON.parse(JSON.stringify(checkedEmployessList));
					this.option.childDepartments = [];

					this.showTransfer = false;
				} else if (this.approverConfig.settype == 4 && this.approverConfig.selectRange == 3) {

					// 指定成员 - 指定角色
					console.log(data);

					let {
						checkedEmployessList
					} = data;

					this.approverConfig.nodeUserList = [];
					checkedEmployessList.forEach(item => {
						this.approverConfig.nodeUserList.push({
							...item,
							type: 2,
							targetId: item.roleId,
							name: item.roleName
						})
					});
					this.optionRole.employees = JSON.parse(JSON.stringify(checkedEmployessList));
					this.approverRoleVisible = false;
				}


			},
			changeType(val) {
				console.log(this.approverConfig);
				console.log(val);
				this.approverConfig.nodeUserList = [];
				this.approverConfig.examineMode = 1;
				this.approverConfig.noHanderAction = 2;
				if (val == 2) {
					this.approverConfig.directorLevel = 1;
				} else if (val == 4) {
					this.approverConfig.selectMode = 2;
					this.approverConfig.selectRange = 1;
				} else if (val == 7) {
					this.approverConfig.examineEndDirectorLevel = 1
				}
				console.log(this.approverConfig.settype);

				this.option.employees = [];
				this.option.childDepartments = [];
				this.optionRole.employees = [];
				this.optionRole.childDepartments = [];
			},
			addApprover() { // 添加/修改成员

				this.option.employees = [];
				for (let i = 0; i < this.approverConfig.nodeUserList.length; i++) {
					let {
						name,
						targetId
					} = this.approverConfig.nodeUserList[i];
					this.option.employees.push({
						employeeName: name,
						id: targetId
					});
				};


				this.showTransfer = true;
			},
			removeEle(arr, elem, key = 'id') { // 删除 - 指定成员 - 指定成员/指定角色 - tags
				var includesIndex;
				arr.map((item, index) => {
					if (item[key] == elem[key]) {
						includesIndex = index
					}
				});
				arr.splice(includesIndex, 1);
				console.log(arr);

				const targetIdMap = {};
				arr.forEach(row => {
					targetIdMap[row.targetId] = true;
				});
				const data = [];
				if (this.approverConfig.settype == 1 || (this.approverConfig.settype == 4 && this.approverConfig
						.selectRange == 2)) {

					this.option.employees.forEach(item => {
						if (targetIdMap[item.id]) {
							data.push(item);
						}
					});
					this.option.employees = JSON.parse(JSON.stringify(data));
					console.log(this.option.employees);
				} else if (this.approverConfig.settype == 4 && this.approverConfig.selectRange == 3) {
					this.optionRole.employees.forEach(item => {
						if (targetIdMap[item.id]) {
							data.push(item);
						}
					});
					this.optionRole.employees = JSON.parse(JSON.stringify(data));
				}
			},
			clearTags() { // 点击清除按钮
				this.option.employees = [];
				this.option.childDepartments = [];
				this.optionRole.employees = [];
				this.optionRole.childDepartments = [];
				this.approverConfig.nodeUserList = []
			},
			changeRange(val) { // 选择范围-radio
				this.approverConfig.selectRange = val;
				this.option.employees = [];
				this.option.childDepartments = [];
				this.optionRole.employees = [];
				this.optionRole.childDepartments = [];
				this.approverConfig.nodeUserList = [];
			},
			addRoleApprover() { // 添加/修改角色

				this.optionRole.employees = [];
				for (let i = 0; i < this.approverConfig.nodeUserList.length; i++) {
					let {
						code,
						roleId,
						scope,
						roleName,
						description,
						status,
						type,
						name,
						targetId
					} = this.approverConfig.nodeUserList[i];
					this.optionRole.employees.push({
						roleName: name,
						id: targetId,
						code: code,
						roleId: roleId,
						scope: scope,
						roleName: roleName,
						description: description,
						status: status,
						type: type,
					});
				};

				this.approverRoleVisible = true;
			},

			selectData(num, str) { // 映射层级主管选项
				console.log(num);
				let arr = [];
				for (let i = 1; i <= num; i++) {
					let text = '';

					if (str == '最高') {
						text = i == 1 ? '最高层级主管' : '第' + i + '层级主管'
					} else if (str == '直接') {
						text = i == 1 ? '直接主管' : '第' + i + '级主管'
					}

					arr.push({
						text: text,
						value: i,
					})
				}
				console.log(arr);
				return arr;
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		background-color: #e8e8e8;

		.content_main {
			padding: 10px;

			.drawer_content {
				// width: 50vw;
				width: 100%;
				background-color: #fff;
				border-radius: 8px;
				// overflow: auto;

				// 选择范围
				.approver_self_select {

					h3 {
						padding: 10px 15px;
					}
				}
			}
		}

		.content_bottom {
			background-color: #fff;

			button {
				margin-right: 10px !important;
			}
		}
	}

	.u-radio-group {
		background-color: #fff;

		.u-radio {
			padding: 6px 10px;
			margin-right: 10px;
		}
	}
</style>